import {
  getInterfaceInfoByIdUsingGET, invokeInterfaceInfoUsingPOST
} from "@/services/swagger/interfaceInfoController";



import { PageContainer } from "@ant-design/pro-components";
import React,{ useEffect,useState } from 'react';
import { useParams } from 'umi';
import {Button, Descriptions, Form, Card, Badge, Input, Divider, message} from "antd";
/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */

const Index: React.FC = () => {

  const [initLoading, setInitLoading] = useState(true);
  const [invokeLoading, setInvokeLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceInfo>();
  const [invokeData, setInvokeData] = useState<any>();
  const params = useParams();

  const initDate = async () => {
    setInitLoading(true);
    try {
      const res =  await getInterfaceInfoByIdUsingGET({
        id:Number(params.id)
      });
      if(res.data){
        setData(res?.data);
      }
    } catch (error:any) {
      message.error('Delete failed, please try again');
    }
    setInitLoading(false)
  }

  const onFinish = async (values: any) => {
    setInvokeLoading(true);
    try{
    const res = await invokeInterfaceInfoUsingPOST({
      ...values,
      id: params.id,
    })
    if(res.data){
       setInvokeData(res.data)
      }
      return;
    } catch (error) {
      message.error('Delete failed, please try again');
      return false;
    }
    setInvokeLoading(false);
  };


  useEffect(() => {
    initDate()
  },[]);


  return (
    <PageContainer title={"查看接口"} >
      <Card>
        { data ?( <Descriptions title="接口详情" column={1}>
          <Descriptions.Item label="接口名称">{data?.name}</Descriptions.Item>
          <Descriptions.Item label="状态">
            { data?.status === 0 ? <Badge status="processing" text="正常" /> : <Badge status="error" text="无效" />}
          </Descriptions.Item>
          <Descriptions.Item label="接口详情">{data?.description}</Descriptions.Item>
          <Descriptions.Item label="接口地址">{data?.url}</Descriptions.Item>
          <Descriptions.Item label="请求头">{data?.requestHeader}</Descriptions.Item>
          <Descriptions.Item label="响应头">{data?.responseHeader}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{data?.createTime}</Descriptions.Item>
          <Descriptions.Item label="修改时间">{data?.updateTime}</Descriptions.Item>
        </Descriptions> ) : <>接口不存在</>}
        <Divider />
        <Form
          layout="vertical"
          name="basic"
          // labelCol={{ span: 8 }}
          // wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            label="请求参数"
            name="userRequestParams"
          >
            <Input.TextArea rows={5} />
          </Form.Item>

          <Form.Item wrapperCol={{  span: 16 }}>
            <Button type="primary" htmlType="submit">
              调用
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Divider/>
      <Card>
        调用结果：{invokeData}
      </Card>
    </PageContainer>
  );
};

export default Index;
